<template>
	<view class="topic-record">
		<view class="uni-margin-wrap">
			<swiper class="swiper" :current="swiper.currentswiper" @change="changeswiper">
				<swiper-item v-for="(item,idx) in form.images" :key="'img'+idx" @click="$Foundation.previewImgs(form.images,idx)">
					<image :src="$filters.oosImgZip(item)" class="topic-swi-item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="uni-badge">{{swiper.currentswiper + 1}}/{{form.images&&form.images.length}}</view>
		</view>
		<view class="uni-topic-list">
			<view class="topic-list">
				<view class="topic-tag">#{{form.title}}#</view>
				<view class="topic-list-p">
					<image :src="$imgUrl + '/services/person-icon.png'" class="topic-list-person" mode=""></image>
					<view class="view">
						<span class="list-f-1">{{form.creatorName}}</span>
						<span class="list-f-2">{{$filters.formatTimeAgo(form.createTime)}}</span>
					</view>
				</view>
				<view class="topic-list-desc">
					{{form.content}}
				</view>
				<view class="topic-detail">
					<view class="view">{{$filters.formatDate(form.createTime)}}</view>
					<view class="topic-zan view" v-if="form.flag" @click.native.stop="getTopicUpvote">
						<image :src="$imgUrl + '/personal/zan-icon.png'" class="image" mode=""></image>{{swiper.thumbs}}
					</view>
					<view class="topic-zan yellow view" v-else>
						<image :src="$imgUrl + '/personal/zan-yellow-icon.png'" class="image" mode=""></image>{{swiper.thumbs}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { reactive,ref } from "vue";
import { topicsInfo,topicsUpvote } from '@/common/API/member'
import { onLoad } from "@dcloudio/uni-app"

const form = reactive({
	images: null,
	name: null,
	topicId: null,
	userId: null,
	creatorName: null,
	createTime: null,
	content: null,
	title: null,
	flag: null
})
const swiper = reactive({
	currentswiper: 0,
	id: null,
	thumbs: null
})
const changeswiper = (e:any) => {
	swiper.currentswiper = e.detail.current;
}
//点赞
const getTopicUpvote = async () => {
	if(!form.flag || topicStatus.value!=2){
		return
	}
	let userId = uni.getStorageSync('userId')
	let data = {
		userId: userId,
		topicPostId: form.topicId
	}
	let res = await topicsUpvote(data)
	if(res){
		swiper.thumbs ++
		form.flag = !form.flag
	}
}
const topicStatus = ref()
onLoad((options)=>{
	if(options){
		topicStatus.value = options.topicStatus
		let info = JSON.parse(decodeURIComponent(options.info))
		console.log(info)
		form.images = info.images
		form.name = info.name
		form.creatorName = info.userName
		form.createTime = info.createTime
		form.content = info.content
		swiper.thumbs = info.thumbs
		form.title = info.title
		form.topicId = info.id
		form.userId = info.userId
		form.flag = info.flag
	}
})
</script>
<style lang="scss" scoped>
.topic-record{
	display: flex;
	flex-direction: column;
	.uni-margin-wrap {
		width: 750rpx;
		height: 420rpx;
		position: relative;
		.uni-badge{
			position: absolute;
			right: 22rpx;
			bottom: 60rpx;
			color: #fff;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 6rpx;
			padding: 0 10rpx;
		}
		.swiper {
			height: 420rpx;
			width: 750rpx;
			z-index: -1;
		}
		.swiper-item,.topic-swi-item{
			display: block;
			height: 420rpx;
			width: 750rpx;
			line-height: 420rpx;
			text-align: center;
			z-index: -1;
		}
	}
	.uni-topic-list{
		flex: 1;
		border-radius: 32rpx 32rpx 0px 0px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -4rpx 12rpx  rgba(0, 0, 0, 0.08);
		margin-top: -38rpx;
		padding: 24rpx 0 48rpx 0;
		position: relative;
		top: -10rpx;
		.topic-tag{
			background: rgba(253, 150, 24, 1);
			padding: 0 16rpx;
			color: #fff;
			display: inline-block;
			border-radius: 8rpx;
			margin-bottom: 24rpx;
		}
		.topic-list{
			margin: 32rpx 44rpx 32rpx 44rpx;
			.topic-list-p{
				display: flex;
				align-items: center;
				.view{
					display: flex;
					flex-direction: column;
				}
				.list-f-1{
					font-size: 28rpx;
					color: rgba(0, 0, 0, 1);
				}
				.list-f-2{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			.topic-list-desc{
				color: rgba(0, 0, 0, 1);
				font-size: 32rpx;
				padding: 30rpx 0;
				width: 600rpx;
				overflow: hidden;
				white-space: normal;
				word-wrap: break-word;
			}
			.topic-list-person{
				width: 76rpx;
				height: 76rpx;
				margin-right: 32rpx;
				overflow: hidden;
				border-radius: 50%;
			}
			.topic-list-img1{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr;
				grid-gap: 20rpx 10rpx;
				.image{
					width: 208rpx;
					height: 208rpx;
				}
			}
			.topic-list-img2{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr;
				grid-gap: 20rpx 10rpx;
				.image{
					width: 208rpx;
					height: 208rpx;
				}
			}
			.topic-list-img3{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr;
				grid-gap: 20rpx 10rpx;
				.image{
					width: 208rpx;
					height: 208rpx;
				}
			}
			.topic-detail{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 18rpx;
				.view{
					color: rgba(153, 153, 153, 1);
				}
				.topic-zan{
					display: flex;
					align-items: center;
				}
				.image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}
			}
		}
	}
}
</style>